﻿@using WineStore.Extends;
@model PagedList.IPagedList<WineStore.Models.Product>
@{
    ViewBag.Title = "ShowProduct";
    Layout = "~/Views/Shared/AdminLayout.cshtml";
    AjaxOptions ajaxOpts = new AjaxOptions
    {
        UpdateTargetId = "tabledata"
    };
}
@section Styles
{
    <!--Sử dụng cho paging-->
    <link href="../../Content/PagedList.css" rel="stylesheet" type="text/css" />
    <!--Sử dụng cho autocomplete-->
    <link href="../../Content/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
    <!--Sử dụng cho tooltip sort-->
    <style type="text/css">
        div#tipDiv
        {
            font-size: 11px;
            line-height: 1.2;
            color: Blue;
            background-color: #E1E5F1;
            border: 1px solid red;
            padding: 4px;
            width: 100px;
        }
        /*image hover effect*/
        .image_shine
        {
            width: 65px;
            height: 100px;
            margin: 0px auto;
            position: relative;
            border: 1px solid #666;
        }
        .hover_shine
        {
            width: 100%;
            height: 100%;
            background-image: url(../../Content/Images/iuvzYDPlYu8RR.png);
            position: absolute; /*initial position*/
            background-position: -265px 0;
            left: 0px;
            top: 0px;
            background-repeat: no-repeat; /*css transition*/
            -webkit-transition: background-position .90s ease;
            -moz-transition: background-position .90s ease;
            -o-transition: background-position .90s ease;
            transition: background-position .90s ease;
        }
        .hover_shine:hover
        {
            /*Final position*/
            background-position: 10px 0;
        }
    </style>
}
@section Scripts
{
    <!--Sử dụng cho tooltip sort-->
    <script src="../../Scripts/dw_tooltip_c.js" type="text/javascript"></script>
    <!--Sử dụng cho autocomplete-->
    <script src="../../Scripts/jquery-ui-1.8.11.min.js" type="text/javascript"></script>
    <!--Sử dụng cho tooltip sort-->
    <script type="text/javascript">
        dw_Tooltip.content_vars = {
            L1: 'Click here to sort...',
            L2: '',
            L3: ''
        }
    </script>
    <!--Sử dụng cho autocomplete-->
    <script type="text/javascript" language="javascript">
        $(document).ready(function () {
            $('*[data-autocomplete-url]')
        .each(function () {
            $(this).autocomplete({
                source: $(this).data("autocomplete-url")
            });
        });
        });
    </script>
    <!--Sử dụng cho row hover-->
    <script type="text/javascript">
        $(document).ready(function () {
            $("tr").not(':first').hover(function () {
                $(this).css("background", "#F0FFFF");
            }, function () {
                $(this).css("background", "");
            }
            );
        });
    </script>
}
<!-- Table (TABLE) -->
<h3 class="tit">
    Product List
</h3>
<div style="color: Red; font-size: 13px;" id="update-message">
</div>
@using (Ajax.BeginForm("ShowProductPartial", ajaxOpts))
{
    <p style="color: Red;">
        Find by name:@Html.TextBox("SearchString", ViewBag.CurrentFilter as string, new { data_autocomplete_url = Url.Action("Autocomplete") })
        <input type="submit" value="Search" />
    </p>

    // Sau khi thuc hien ShowProductPartial Action thay doi du lieu trong div tabledata
    <div id="tabledata">
        @Html.Partial("ShowProductPartial")
    </div>
}